<template>
    <div class="page">
        <div class="row">
            <h1 style="text-align:center;padding:2mm;margin-bottom: 0px;">欢迎光临</h1>
            <h2 style="text-align:center;margin-top: 0px;">{{sinfo.name}}</h2>
        </div>
        <div class="row">
            <p>客户姓名：{{oinfo.name}}</p>
            <p>客户卡号：{{oinfo.vipcard}}</p>
            <p>充值余额剩余：{{oinfo.yue}}元 </p>
            <p>赠送余额剩余：{{oinfo.zsyue}}元 </p>
            <p>&nbsp;&nbsp;</p>
            <p>单号：{{oinfo.order_sn}} </p>
        </div>
        <div v-show="putong.length > 0">
            <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
            <div class="row">
                <h3 style="text-align:center;margin:5px 0px">普通消费</h3>
                <table style="width: 100%">
                    <thead>
                        <tr style="display: flex">
                            <th style="width:45%">名称</th>
                            <!-- <th style="width:10mm">价格</th> -->
                            <th style="width:20%">数量</th>
                            <th style="width:15%">其他</th>
                            <th style="width:20%">总金额</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="display: flex" v-for="(opt,key) in putong">
                            <td style="width:45%">{{opt.typename}}</td>
                            <!-- <td>{{opt.price}}</td> -->
                            <td style="width:20%">{{opt.num}}</td>
                            <td style="width:15%">
                                <span v-show="opt.istemp == 1">存</span>
                                <span v-show="opt.isgift == 1">送</span>
                            </td>
                            <td style="width:20%">{{opt.amount}}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr style="display: flex">
                            <td style="width:45%">小计</td>
                            <td style="width:20%">{{counts.putong.num}}</td>
                            <td style="width:15%"></td>
                            <td style="width:20%">{{counts.putong.amount}}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div v-show="kahao.length > 0">
            <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
            <div class="row">
                <h3 style="text-align:center;margin:5px 0px">卡耗消费</h3>
                <table>
                    <thead>
                        <tr>
                            <th style="width:50%">名称</th>
                            <!-- <th style="width:10mm">价格</th> -->
                            <th style="width:15%">数量</th>
                            <th style="width:15%">剩余</th>
                            <th style="width:20%">到期</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(opt,key) in kahao">
                            <td style="width:50%">{{opt.typename}}</td>
                            <!-- <td>{{opt.price}}</td> -->
                            <td style="width:15%">{{opt.num}}</td>
                            <td style="width:15%">{{opt.cardtype == 1 ? '' : opt.nownum}}</td>
                            <td style="width:20%" v-if="opt.cardtype == 1">{{opt.endtime|dateTime}}</td>
                            <td style="width:20%" v-else></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td style="width:50%">小计</td>
                            <td style="width:50%">{{counts.kahao.num}}</td>
                            <!-- <td>{{counts.kahao.amount}}</td> -->
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div v-show="zancun.length > 0">
            <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
            <div class="row">
                <h3 style="text-align:center;margin:5px 0px">暂存消费</h3>
                <table>
                    <thead>
                        <tr>
                            <th style="width:70%">名称</th>
                            <!-- <th style="width:10mm">价格</th> -->
                            <th style="width:30%">数量</th>
                            <!-- <th style="width:17mm">总金额</th> -->
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(opt,key) in zancun">
                            <td style="width:70%">{{opt.typename}}</td>
                            <!-- <td>{{opt.price}}</td> -->
                            <td style="width:30%">{{opt.num}}</td>
                            <!-- <td>{{opt.amount}}</td> -->
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td style="width:70%">小计</td>
                            <td style="width:30%">{{counts.zancun.num}}</td>
                            <!-- <td>{{counts.zancun.amount}}</td> -->
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
        <div class="row">
            <p>实收现金：{{oinfo.recemoney}}元</p>
            <p>充值余额支付：{{oinfo.usebalance}}元</p>
            <p>赠送余额支付：{{oinfo.usegiftbalance}}元</p>
            <!-- <p>卡耗：{{oinfo.cardreduce}}元</p> -->
            <p>&nbsp;&nbsp;</p>
            <p>下单时间：{{oinfo.addtime|hourTime}}</p>
            <p>打印时间：{{new Date()/1000|hourTime}}</p>
        </div>
        <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
        <div class="row">
            <p>电话：{{sinfo.phone}}</p>
            <p>地址：{{sinfo.address}}</p>
            <p>&nbsp;&nbsp;</p>
            <p style="text-align:center">欢迎光临！谢谢惠顾 </p>
        </div>
    </div>
</template>
<script>
import C from '@/common/common.js'

export default {
  name: 'printOpenCard',
  data () {
    return {
      oinfo: {},
      cinfo: [],
      sinfo: {},
      zancun: [],
      kahao: [],
      putong: [],
      id: ''
    }
  },
  methods: {
    async getmsg () {
      let res = await C.ajax('/shop/print/getorderlistinfo', { 'id': this.id }, 'post')
      if (res) {
        this.oinfo = res.oinfo
        this.cinfo = res.olist
        this.sinfo = res.sinfo

        res.olist.forEach((row) => {
          if (row.consumetype == 1) {
            this.putong.push(row)
          } else if (row.consumetype == 2) {
            this.kahao.push(row)
          } else {
            this.zancun.push(row)
          }
        })
      }
    },
    contextMenu () {
      const ipc = require('electron').ipcRenderer
      const { remote } = require('electron')
      const { Menu, MenuItem } = remote
      const menu = new Menu()
      menu.append(new MenuItem({ label: '直接打印', click () { ipc.send('print-now') } }))
      menu.append(new MenuItem({ type: 'separator' }))
      menu.append(new MenuItem({ label: '打印预览', click () { ipc.send('print-to-pdf') } }))
      window.addEventListener('contextmenu', (e) => {
        e.preventDefault()
        menu.popup(remote.getCurrentWindow())
      }, false)
    }
  },
  computed: {
    counts: function () {
      var d = {
        kahao: { num: 0, amount: 0 },
        zancun: { num: 0, amount: 0 },
        putong: { num: 0, amount: 0 }
      }

      this.putong.forEach((row) => {
        d.putong.num += row.num
        d.putong.amount += row.amount
      })
      this.zancun.forEach((row) => {
        d.zancun.num += row.num
        d.zancun.amount += row.amount
      })
      this.kahao.forEach((row) => {
        d.kahao.num += row.num
        d.kahao.amount += row.amount
      })

      return d
    }
  },
  mounted: function () {
    this.id = C.getDatas().id
    this.getmsg()
    this.contextMenu()
  }
}
</script>
<style>
p {
    margin: 0px;
}

* {
    box-sizing: border-box;
}

.row {
    padding: 0px 1mm;
}

.page {
    background: white;
    color: #000;
    display: flex;
    flex-direction: column;
    font: 2.8mm "Arial";
    padding: 0;
    margin: 0;
}

.content {
    border: none;
}

@page {
    margin: 0px;
}

@media print {
    body {
        width: 45.3mm !important;
        height: auto !important;
        margin: 0;
        padding: 0;
        background: white;
    }

    .header{display: none}
}



th {
    text-align: left;
    margin: 0px;
    padding: 0px;
}

td {
    margin: 0px;
    padding: 0px
}

tr{
    display: flex
}

table{
    width: 100%
}
</style>